// import { getColor } from '@/utils/editor/defaultStyleUtil'
import addImg from '@/assets/images/admin/topology/add.png';
import computerSvg from '@/assets/icons/svg/computer.svg';

export default function (G6: any) {
	/**
	 * 拓扑图编辑器节点
	 */
	G6.registerNode(
		'editorsNodeItroad',
		{
			options: {
				icon: addImg,
				iconStyle: {
					width: 90,
					height: 60,
				},
				style: {
					//节点填充色
					fill: '#9EC9FF',
					//节点的描边颜色
					//stroke: '#5B8FF9',
					//鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持
					cursor: 'default',
				},
				stateStyles: {
					selected: {
						fill: '#9EC9FF',
					},
					hover: {
						cursor: 'move',
					},
				},
			},
			/**
			 * 绘制节点，包含文本
			 * @param  {Object} cfg 节点的配置项
			 * @param  {G.Group} group 节点的容器
			 * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
			 * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
			 */
			drawShape: function drawShape(cfg: any, group: any) {
				const fill = cfg.style.fill;
				const rect = group.addShape('rect', {
					attrs: {
						x: 0,
						y: 0,
						width: 80,
						height: 80,
						radius: 15,
						//节点的描边颜色
						//stroke,
						//填充色，有了这个填充色才能在点击节点空白的地方也能触发到事件，或者设置图形的draggable为true
						fill: fill,
						//描边宽度
						lineWidth: 0,
						//设置填充的 alpha 或透明值
						fillOpacity: 0.5,
					},
					name: 'rect-shape',
				});
				//节点标题
				group.addShape('text', {
					attrs: {
						text: cfg.name,
						x: 40,
						y: 100,
						fill: '#fff',
						fontSize: 14,
						textAlign: 'center',
						textBaseline: 'middle',
						fontWeight: 'bold',
					},
					name: 'text-shape',
					draggable: true,
				});
				//添加图形
				group.addShape('image', {
					attrs: {
						x: -5,
						y: 20,
						width: this.options.iconStyle.width,
						height: this.options.iconStyle.height,
						fill: fill,
						img: this.options.icon,
					},
					name: 'image-shape2',
					draggable: true,
				});
				// 网端文本
				let segmentText = 'IP：';
				if (cfg.ipList instanceof Array) {
					for (let i = 0; i < cfg.ipList.length; i++) {
						const item = cfg.ipList[i];
						segmentText += '\n' + item;
					}
				}
				group.addShape('text', {
					attrs: {
						text: segmentText,
						x: 0,
						y: 0,
						fill: '#fff',
						fontSize: 12,
						textAlign: 'left',
						textBaseline: 'bottom',
						fontWeight: 'bold',
					},
					name: 'component-shape',
					draggable: false,
				});
				return rect;
			},
			/**
			 * 绘制后的附加操作：隐藏组件信息
			 * @param  {Object} cfg 节点的配置项
			 * @param  {G.Group} group 图形分组，节点中图形对象的容器
			 */
			afterDraw(cfg: any, group: any) {
				const childrens = group.get('children');
				childrens[childrens.length - 1].hide();
			},
			/**
			 * 获取锚点（相关边的连入点）
			 * @param  {Object} cfg 节点的配置项
			 * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点
			 */
			getAnchorPoints(cfg: any) {
				return [
					[0, 0.5],
					[1, 0.5],
				];
			},
			/**
			 * 更新节点，包含文本
			 * @override
			 * @param  {Object} cfg 节点的配置项
			 * @param  {item} item 节点
			 */
			update(cfg: any, item: any) {
				const group = item.getContainer();
				const children = group.get('children');
				const node = children[0];
				node.x = cfg.x;
				node.y = cfg.y;
				node.ipList = cfg.ipList;
				const nodeNameText = children[1];
				nodeNameText.attrs.text = cfg.componentName;
				nodeNameText.cfg.attrs.text = cfg.componentName;
			},
			/**
			 * 响应节点的状态变化。
			 * 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档
			 * @param  {String} name 状态名称
			 * @param  {Object} value 状态值
			 * @param  {Item} item 节点
			 */
			setState(name: any, value: any, item: any) {
				const group = item.getContainer();
				// console.log()
				if (name === 'selected' || name === 'active' || name === 'hover') {
					const rect = group.getChildByIndex(0);
					if (value) {
						rect.attr('fill', this.options.stateStyles.selected.fill);
					} else {
						rect.attr('fill', '');
					}
				} else if (name === 'hover1') {
					const rect = group.getChildByIndex(0);
					const text = group.getChildByIndex(1);
					if (value) {
						rect.attr('cursor', this.options.stateStyles.hover.cursor);
						if (text) text.attr('cursor', this.options.stateStyles.hover.cursor);
					} else {
						rect.attr('cursor', this.options.style.cursor);
						if (text) text.attr('cursor', this.options.style.cursor);
					}
				}
			},
		},
		'single-node'
	);

	/****************************************************************************** */

	/**
	 * 展示拓扑图的自定义节点
	 */
	G6.registerNode(
		'myNode',
		{
			options: {
				icon: computerSvg,
				iconStyle: {
					width: 14,
					height: 14,
					left: 0,
					top: 0,
				},
				style: {
					//节点填充色
					fill: '#9EC9FF',
					//节点的描边颜色
					stroke: '#5B8FF9',
					//鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持
					cursor: 'default',
				},
				stateStyles: {
					selected: {
						fill: '#9EC9FF',
					},
					hover: {
						cursor: 'move',
					},
				},
			},
			/**
			 * 绘制节点，包含文本
			 * @param  {Object} cfg 节点的配置项
			 * @param  {G.Group} group 节点的容器
			 * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
			 * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
			 */
			drawShape: function drawShape(cfg: any, group: any) {
				const width = cfg.style.width;
				const height = cfg.style.height;
				const fill = cfg.style.fill;
				// const stroke = getColor(cfg.nodeType);
				const stroke = '#5B8FF9';
				const rect = group.addShape('rect', {
					attrs: {
						x: 0,
						y: 0,
						width: 150,
						height: 80,
						radius: 15,
						//节点的描边颜色
						stroke,
						//填充色，有了这个填充色才能在点击节点空白的地方也能触发到事件，或者设置图形的draggable为true
						fill: fill,
						lineWidth: 1.2,
						fillOpacity: 1,
					},
					name: 'rect-shape',
				});
				//添加空白图形-为了解决只能点击rect的文字与下面image图片才能触发点击事件的问题
				group.addShape('image', {
					attrs: {
						x: 0,
						y: 0,
						width: 90,
						height: 90,
						img: null,
					},
					name: 'image-shape2',
					draggable: true,
				});
				group.addShape('text', {
					attrs: {
						text: cfg.componentName,
						x: 90,
						y: 15,
						fill: '#00287E',
						fontSize: 12,
						textAlign: 'center',
						textBaseline: 'middle',
						fontWeight: 'bold',
					},
					name: 'text-shape',
					draggable: true,
				});
				group.addShape('text', {
					attrs: {
						text: cfg.nodeData.alarmText,
						x: 90,
						y: 35,
						fill: '#00287E',
						fontSize: 10,
						textAlign: 'center',
						textBaseline: 'middle',
					},
					name: 'alarm-name-shape',
					draggable: true,
				});
				group.addShape('text', {
					attrs: {
						text: cfg.nodeData.alarmCount,
						x: 90,
						y: 55,
						fill: '#00287E',
						fontSize: 10,
						textAlign: 'center',
						textBaseline: 'middle',
					},
					name: 'alarm-count-shape',
					draggable: true,
				});
				//添加图形
				group.addShape('image', {
					attrs: {
						x: 0,
						y: 0,
						width: 50,
						height: 50,
						fill: fill,
						img: this.options.icon,
					},
					name: 'image-shape2',
					draggable: true,
				});
				return rect;
			},
			getAnchorPoints() {
				return [
					[0, 0.5],
					[1, 0.5],
				];
			},
		},
		'single-node'
	);
}
